import useUser from "../Demo09/useUser";
import {Modal} from 'antd'

function UserInforModal ({visible,userId,...rest}){
  const {data:user,error} = useUser(userId);
  return (
    <Modal
      open = {visible}
      className = "exp-10-user-info-modal"
      {...rest}
      >
        {error && "Fetch failed"}
        {
          user?(
            <div className="exp-10-user-info-modal">
              <img src={user.avatar} alt={user.name} />
              <label>{user.name}</label>
              <p>{user.introduction}</p>
            </div>
          ):("Loading...")
        }
      </Modal>
  )
}
export default function UserInforModalWapper ({visible,...rest}) {
  if (!visible) return null;
  return <UserInforModal visible {...rest}></UserInforModal>
}